<template>
  <div class="businessForgetBox">
    <loginHeader></loginHeader>
    <div class="public-header mat">
      <h2 class="public-header-ch">企业忘记密码</h2>
      <p class="public-header-en">FORGET YOUR PASSWORD</p>
      <div class="public-header-line"></div>
    </div>
    <!-- 企业修改密码 -->
    <div class="businessBox" v-if="businessBox">
        <img src="../../static/image/forget-email.png" alt="">
        <p>您好，我们将发送验证信至您的邮箱：</p>
        <el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" 
            ref="ruleForm" label-width="100px" class="demo-ruleForm"
        >
            <el-form-item label="邮箱" prop="email" >
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button class="sendPrimary" type="primary" @click="submitForm('ruleForm')">发送</el-button>
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
        </el-form>
    </div>
    <!-- 企业修改密码 end-->

    <!-- 企业修改密码Tip -->
    <div class="tipBox" v-if="tipBox">
        <img src="../../static/image/forget-emailSuccess.png" alt="">
        <div class="tip-content">
            邮件已发送到您的邮箱 <router-link to="home">{{ruleForm.email}}</router-link>
            请按照邮箱提示操作，完成身份验证<br/>
            如未收到验证信，请查看邮箱有没有设置拒收邮件，或联系官方客服电话：<span>0800-333-666</span> 
        </div>
        <button class="tip-btn">完成</button>
    </div>

    <!-- 企业修改密码Tip end -->

  </div>
  


</template>
<script>
import loginHeader from '../components/loginHeader.vue'
    export default {
        data() {
            return {
                // 表单对齐方式
                labelPosition: 'top',
                ruleForm:{
                    email:''
                },
                rules:{
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type:'email', message: '请输入正确的邮箱地址', trigger: ['blur' , 'change']}
                    ],
                },
                businessBox:true,
                tipBox:false
                
                
                
            }
        },
        components: {
            loginHeader
        },
        methods:{

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        this.tipBox = true;
                        this.businessBox = false;
                        // console.log('tipBox:'+ this.tipBox)
                        // console.log('businessBox:' + this.businessBox)
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
                // 邮箱验证接口
                let data = {
                    email:this.ruleForm.email,
                }
                this.$http.sendEmail(data,(res)=>{
                    if(res.errCode == 0){
                        // alert("邮件发送成功")
                    }else{
                        // alert('邮件发送失败')
                    }
                    // console.log(res);
                },(errRes)=>{
                    // console.log(errRes)
                });
                
            },
            
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

        }
    }
</script>

